<article>
    <h1>A simple HTML document</h1>
    <div>
        Here is a test in div.
        <p>
            This is a paragraph inside a div element, have
            <mention>@Mention Tag</mention>
            <a href="https://google.com"
                >Link with: <b>Bold <i>italic</i></b></a
            >, <strong>bold</strong>, <em>italic</em>, and
            <code>code</code> text.
        </p>
        <script>
            console.log("Hello, world!");
        </script>
        <p>This is a text before blockquote.</p>
        <blockquote>
            This is before paragraph in blockquote.
            <p>This is first blockquote paragraph.</p>
            <blockquote>
                <p>This is second level</p>
                <blockquote>
                    <p>This is third level</p>
                </blockquote>

                <ul>
                    <li>List item in a blockquote.</li>
                    <li>Second list item</li>
                </ul>
            </blockquote>
            This is after paragraph in blockquote.
        </blockquote>
        <style type="text/css">
            .highlight {
                background-color: #ff0;
            }
        </style>
        <p>
            <img
                src="https://is1-ssl.mzstatic.com/image/thumb/avICmr1PbBRB-PAeplGreA/1378x774.jpg"
                height="400px"
            />
        </p>
        <div>
            <p>This is second paragraph.</p>
        </div>
        A text after div.
        <p>
            这是一个中文演示段落，用于展示更多的
            <a href="https://github.github.com/gfm/">Markdown GFM</a>
            内容。これは日本語のデモ段落です。の多言語サポートを示すためのテキストが含まれています。
        </p>
    </div>

    <div>
        <h2>List</h2>
        Example for Bulleted and Numbered List:

        <h3>Numbered List</h3>
        Text before the Numbered List.
        <ol>
            <li>
                Numbered item 1
                <ol>
                    <li>Sub <strong>item</strong> 1</li>
                    <li>Sub <foo>item</foo> 2</li>
                </ol>
            </li>
            <li>Numbered <em>item</em> 2</li>
            <li>Numbered item 3</li>
        </ol>
        Text after the Numbered List.
        <h3>Bulleted List</h3>
        Text before the Bulleted List.
        <ul>
            <li>
                Bullet 1
                <ol>
                    <li>Sub Numbered 1</li>
                    <li>Sub Numbered 2</li>
                </ol>
            </li>
            <li>Bullet 2</li>
        </ul>
        Text after the Bulleted List.
    </div>
    Text before the section.
    <section>
        <h2>Table</h2>
        Text before the table.
        <table>
            <thead>
                <tr>
                    <th>Head 1</th>
                    <th>Head 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td span="2">This <strong>Cell</strong> have 2 span</td>
                </tr>
                <tr>
                    <td>Cell 3</td>
                    <td>Cell 4</td>
                </tr>
            </tbody>
        </table>
        Text after the table.
    </section>
    Text after the section.
    <section>
        <h2>Images</h2>
        <img
            src="https://is1-ssl.mzstatic.com/image/thumb/5tQkYfzU9bSMUol0GajO4w/1378x774.jpg"
            height="400px"
        />
        <p>
            (A Tesla Model X on display at the June 2024 Shanghai new energy
            vehicle show. Image credit: CnEVPost)
        </p>
        <img
            src="https://miro.medium.com/v2/resize:fit:1400/format:webp/1*-Y9ozbNWSViiCmal1TT32w.jpeg"
            width="100%"
        />
        Text before the image.
        <img
            src="https://miro.medium.com/v2/resize:fit:1400/format:webp/0*u4La03Nh6E4zIc9-.jpeg"
            width="100%"
        />
        Text after the image.
        <img
            src="https://miro.medium.com/v2/resize:fit:1400/format:webp/0*Q_JiltniByWLWoUv"
            style="width: 100%"
        />
    </section>
</article>
